<template>
    <div>
        <el-button class="add-btn" type="primary" @click="clickAdd" size="mini">添加</el-button>
        <el-table
                ref="singleTable"
                :data="groupData"
                stripe
                border
                @current-change="handleCurrentChange"
                style="width: 100%">
            <el-table-column
                    type="index"
                    label="#"
                    align="center"
                    width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    property="spuId"
                    label="spuId"
                    min-width="100">
            </el-table-column>
            <el-table-column
                    align="center"
                    property="title"
                    label="名称"
                    min-width="200">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="图片"
                    prop="image">
                <template v-slot="scope">
                    <img :src="scope.row.image" alt="" width="100">
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    property="sort"
                    label="排序"
                    min-width="100">
            </el-table-column>

            <el-table-column label="操作" min-width="300" align="center">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="deleteGroup(scope.row)">删除</el-button>
                </template>
            </el-table-column>

        </el-table>
        <!--编辑对话框-->
        <el-dialog
                title="编辑"
                :visible.sync="editDialogVisible"
                width="50%"
                @close="editDialogClosed"
                :close-on-click-modal=false>
            <!--内容主体区-->
            <el-form :model="editForm" label-width="70px" ref="addFormRef">
                <el-form-item label="排序">
                    <el-input v-model="editForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片：" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            name="file"
                            action="http://upload.gker.com/upload/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!--底部-->
            <span slot="footer" class="dialog-footer">
    <el-button @click="editDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editGroup">确 定</el-button>
  </span>
        </el-dialog>
        <!--添加对话框-->
        <el-dialog
                title="添加组"
                :visible.sync="addDialogVisible"
                width="50%"
                @close="addDialogClosed"
                :close-on-click-modal=false>
            <!--内容主体区-->
            <el-form :model="addForm" label-width="70px" ref="addFormRef">
                <el-form-item label="spuId">
                    <el-input v-model="addForm.spuId"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                    <el-input v-model="addForm.sort"></el-input>
                </el-form-item>
                <el-form-item label="图片：" prop="image">
                    <el-upload
                            class="avatar-uploader"
                            name="file"
                            action="http://upload.gker.com/upload/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <!--底部-->
            <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addGroup">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "IndexRecList",
        props:['groupData','cid'],
        data(){
            return{
                currentRow: null,
                editDialogVisible:false,
                addDialogVisible:false,
                editForm:{},
                currentId:'',
                addForm:{
                    name:''
                },
                //    文件上传
                imageUrl: ''

            }
        },
        methods:{
            /*文件上传*/
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.addForm.image = res.data.url

            },
            beforeAvatarUpload(file) {

            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },
            clickAdd(){
                if (this.cid==null||this.cid===''){
                    this.$message.error("请选择商品类目!")
                    return
                }
                this.addDialogVisible = true
            },
            //新增推荐商品
            async addGroup(){
                let req = {
                    type:1,
                    spuId:this.addForm.spuId,
                    imageUrl:this.addForm.image,
                    sort:this.addForm.sort
                }
                const res = await this.$http.post("/item/recommend/addRecommend",req)
                if (res.data.code !== "200") {
                    return this.$message.error('新增失败')
                }
                this.$emit('getGroupList');
                this.addDialogVisible = false
            },
            async handleEdit(row) {

                this.currentId = row.id
                this.editDialogVisible = true
                const res = await this.$http.get("/item/recommend/getInfoById/"+this.currentId)
                if (res.data.code !== "200") {
                    return this.$message.error('获取失败！错误码:' + res.data.code)
                }
                this.editForm = res.data.data
                this.imageUrl = res.data.data.image
            },
            async editGroup(){

                let req = {
                    id:this.editForm.id,
                    sort:this.editForm.sort,
                    imageUrl:this.editForm.image
                }
                const res = await this.$http.post("/item/recommend/updateRecommend",req)
                if (res.data.code !== "200") {
                    return this.$message.error('更新失败')
                }
                this.$emit('getGroupList');
                this.$message.success('编辑成功！')
                this.editDialogVisible = false
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            //监听对话框的关闭事件
            editDialogClosed() {
                this.$refs.addFormRef.resetFields()
                this.editForm.name=''
                this.imageUrl = ''
            },
            addDialogClosed(){
                this.$refs.addFormRef.resetFields()
                // this.addForm.name=''
                this.imageUrl = ''
            },
            deleteGroup(row){
                this.$confirm('此操作将永久删除分组, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http.get("/item/recommend/deleteRecommend/" + row.id)
                    if (res.data.code !== "200") {
                        return this.$message.error('删除失败！错误码:' + res.data.code)
                    }
                    this.$emit('getGroupList');
                    this.$message.success('删除成功！')
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
        },
    }
</script>

<style scoped>
    .add-btn{
        float: right;
        margin-right: 40px;
        margin-bottom: 15px;
    }
    /*文件上传*/
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>